{}<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 flex justify-around items-center flex-row" :class="{avatarBody: isAndroid}">
			<view class="u-m-r-10">
				<!-- <u-avatar :src="vuex_user.avatar_url" size="60"></u-avatar> -->
				<oss-upload :src-origin="vuex_user.avatar_url" :style-sheet="styleSheet"></oss-upload>
			</view>
			<view class="u-flex-1 flex-1" @click="toBaseInfo" :class="{nameBody: isAndroid}">
				<view class="u-font-18 u-p-b-20">{{vuex_user.name}}</view>
				<view class="u-font-14 u-tips-color">邮箱: {{vuex_user.email}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10" @click="toBaseInfo">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="rmb-circle" title="我的订单" :isLink="true" @click="toOrdersList"></u-cell>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="star" title="商品收藏" :isLink="true" @click="toCollects"></u-cell>
				<u-cell icon="map" title="收货地址" :isLink="true" @click="toAddress"></u-cell>
			</u-cell-group>
		</view>

		<view class="u-m-t-20" @click="logout">
			<u-cell-group>
				<u-cell icon="close" title="退出"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import { authLogout } from '@/config/api'
	export default {
		data() {
			return {
				styleSheet: {'width': '60px', 'height': '60px', 'borderRadius': '50%', 'overflow': 'hidden'},
				isAndroid: false
			}
		},
		onLoad() {
		
		},
		onShow() {
			if(this.$u.utils.isAndroid()) {
				this.isAndroid = true
			}
			if(!this.$u.utils.isLogin()) return;
		},
		methods: {
			toAddress() {
				this.$u.route({
					url: 'pages/address/index'
				})
			},
			toOrdersList() {
				this.$u.route({
					url: 'pages/orders/index'
				})
			},
			toCollects() {
				this.$u.route({
					url: 'pages/center/collects'
				})
			},
			toBaseInfo() {
				this.$u.route({
					url: 'pages/center/baseInfo'
				})
			},
			async logout() {
				try {
					// 请求API，退出登录
					const logoutRes = await authLogout()

					this.$u.toast('退出成功')

					setTimeout(() => {
						// 清除缓存的token和用户信息
						this.$u.vuex('vuex_token', null);
						this.$u.vuex('vuex_user', {});
						this.$u.route({
							type: 'reLaunch',
							url: 'pages/index/index'
						})
					}, 1500)
				} catch(err) {
					this.$u.toast('退出失败')

					setTimeout(() => {
						// 清除缓存的token和用户信息
						this.$u.vuex('vuex_token', null);
						this.$u.vuex('vuex_user', {});
						this.$u.route({
							type: 'reLaunch',
							url: 'pages/index/index'
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	padding: 30rpx 32rpx;
	background-color: #fff;
}
</style>
